<template>
    <div class="box_alarm">
        <MoodalTitle title="事案件高发时段分析">
            <TimeTab @timeReturnFn="timeReturnFn" />
        </MoodalTitle>
        <div class="box_charts" ref="intelligent"></div>
    </div>
</template>
<script>
import TimeTab from '@/components/TimeTab/Index.vue'
import MoodalTitle from '@/components/ModalTitle/Index.vue'
import { ZhiShiJianGuan } from '@/api/zhangzi/index'

export default {
    components: { MoodalTitle, TimeTab },
    data() {
        return {
            options: [{
                value: '2023',
                label: '2023'
            },
            {
                value: '2024',
                label: '2024'
            }],
            value: '2023',
            Month: [], //月份
            sum: [], //数量
        }
    },
    mounted() {
        this.chuzhiChartsData()
    },
    methods: {
        timeReturnFn(val) {
            this.dateType = val.value
            this.chuzhiChartsData()
        },

        // 市政问题发生时间趋势分析
        chuzhiChartsData() {
            let params = {
                dateType: this.dateType
            }
            let sum = []
            let time = []
            ZhiShiJianGuan.bigDataAnalytics(params).then(res => {
                if (res.code == 200) {
                    res.data.forEach(item => {
                        sum.push(item.count)
                        time.push(item.time)
                    })
                    this.chuzhiChartsFn(sum, time)
                }
            })
        },

        chuzhiChartsFn(sum, time) {
            let colorList = ['#A1E3FD', '#005BC7',]
            let firstIndustry = sum; //上报
            let charts = echarts.init(this.$refs.intelligent)
            let option = {
                color: colorList,
                backgroundColor: "",
                grid: {
                    top: '15%',
                    left: '15',
                    right: '20',
                    bottom: '5%',
                    containLabel: true,
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false, //顶头显示
                        axisTick: {
                            show: false,
                        },
                        interval: 1,
                        axisLabel: {
                            color: 'rgba(36, 173, 254, 1)',
                            fontSize: "1.4rem"
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#5FD7FC',
                            }
                        },
                        data: time,
                    }
                ],
                yAxis: [
                    {
                        // type: 'value',
                        name: '数量',
                        axisLabel: {
                            // formatter: '{value} '
                            color: '#fff', // 坐标轴label文字颜色

                        },
                        axisLine: {
                            //y轴线的颜色以及宽度
                            show: true,
                            lineStyle: {
                                color: '#5FD7FC',
                            }
                        },
                        //坐标轴线样式
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: 'solid', //solid实线;dashed虚线
                                color: 'rgba(36, 173, 254, 0.2)'
                            }
                        },
                    },
                ],
                series: [
                    {
                        name: "上报",
                        data: firstIndustry,
                        type: 'line',
                        smooth: true, //true曲线; false折线
                        symbol: 'none',
                        itemStyle: {
                            normal: {
                                lineStyle: {
                                    color: 'rgba(0, 214, 251, 1)', //改变折线颜色
                                    type: 'solid'
                                }
                            }
                        },
                        areaStyle: {
                            //折线图颜色半透明
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0.3,
                                    color: 'rgba(0, 91, 199, .6)',
                                },

                                {
                                    offset: 1,
                                    color: 'rgba(30, 29, 40, .1)',
                                },
                            ]),
                        }
                    },
                ]
            }
            charts.setOption(option)
        }

    }
}
</script>

<style lang="less" scoped>
.box_alarm {
    position: relative;
    width: 50rem;
    height:  60rem !important;
}

.postion_reletive {
    position: absolute;
    // width: 25rem;
    right: 30.5rem;
    top: 1.4rem;

    /deep/ .el-input__inner {
        padding-left: 2rem;
        width:  10rem;
        height: 3rem;
        background: rgba(4, 11, 32, 0.7);
        border: 1px solid #16d0ff;
        box-shadow: 0px 0px 1.9rem 1px #173c90;
        // border-radius: 8px;
        font-size:  1.8rem;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ffffff;
        opacity: 0.7;
    }


}

.box_charts {
    width: 45.6rem;
    height: 50rem;
}
</style>